<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自助式分析系统-绘制图表</title>
    <style>
          ::-webkit-scrollbar{
            width: 7px;
            height: 7px;
            background-color: #F5F5F5;
          }

          /*定义滚动条轨道 内阴影+圆角*/
          ::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
          }

          /*定义滑块 内阴影+圆角*/
          ::-webkit-scrollbar-thumb{
            border-radius: 10px;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
            background-color: #c8c8c8;
          }
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            display: inline-flex;
        }
        #main{
            flex-direction: row;
            width: 100%;
        }
        #left{
            width: 30%;
            height: 100vh;
            flex-direction: column ;
        }
        #middle{
            background-color: #FFE4E1;
            width: 20%;
            height: 100vh;
            flex-direction: column ;
            border-left: 1px solid black;
            border-right: 1px solid black;
        }
        #right{
            width: 60%;
            height: 100vh;
            flex-direction: column ;
        }
        #right_top{
            width: 100%;
            height: 10%;
            border-bottom: 1px solid black;
        }
        #right_center{
            width: 100%;
            height: 80%;
            border-bottom: 1px solid black;
        }
        #right_bottom{
            width: 100%;
            height: 10%;
            flex-direction: row;
        }
        #right_bottom_left{
            width: 90%;
            height: 100%;
        }
        #right_bottom_right{
            width: 10%;
            height: 100%;
            cursor: pointer;
            line-height: 100%;
            text-align: center;
        }
        #right_bottom_right img{
            width: 100%;
            height: 100%;
        }
        #left_top{
            font-family: "STFangsong";
            font-weight: bolder;
            color: white;
            background: linear-gradient(#a1bcf5, #edbefd);
            line-height: 10vh;
            font-size: 24px;
            height: 10%;
            width: 100%;
            text-align: center;
        }
        #middle_top{

            border-bottom: 1px solid black;
            font-family: "STFangsong";
            font-weight: bolder;
            color:	#696969;
            background: linear-gradient(#a1bcf5, #edbefd);
            line-height: 10vh;
            font-size: 24px;
            text-align: center;
            width: 100%;
            height: 10%;
        }
        #left_center{
            width: 100%;
            height: 90%;
            flex-direction: row;
        }
        #left_center_left{
            width: 60%;
            overflow: auto;
            background: linear-gradient(rgb(247, 241, 182), rgb(182, 219, 255));
        }
        #left_center_right{
            width: 40%;
            flex-direction: column ;
            overflow: auto;
        }
        #left_center_left li{
            list-style: none;
            width: 100%;
            height: 10vh;
            text-align: center;
            line-height: 10vh;
            border-bottom: 1px solid black;
            color: white;
            font-family: "STFangsong";
            font-size: 24px;
            cursor: pointer;
            overflow: hidden;
        }
        .col:hover{
            color: red;
        }
        #left_center_left ul{
            list-style: none;
            width: 100%;
            height: 10vh;
        }
        #left_title, .middle_title{
            width: 71%;
            color: #696969;
            background: linear-gradient(#a1bcf5, #edbefd);
        }
        #left_center_right_title{
            font-family: "STFangsong";
            font-weight: bolder;
            color: white;
            background: linear-gradient(#262d3c, #667788);
            line-height: 10vh;
            font-size: 20px;
            height: 10vh;
            width: 100%;
            text-align: center;
            border-bottom: 1px solid black;
        }
        #col_data li{
            list-style: none;
            width: 100%;
            text-align: center;
            line-height: 10vh;
            border-bottom: 1px solid black;
            color: black;
            font-family: "STFangsong";
            font-size: 24px;
            cursor: pointer;
        }
        #charts{
            width: 80%;
            height: 100%;
            overflow: auto;
        }
        #save_chart{
            width: 20%;
            height: 100%;

        }
        .chart{
            width: 15vh;
            height: 100%;
            border-right: 1px solid black;
        }
        .chart img{
            width: 15vh;
            height: 100%;
            cursor: pointer;
        }
        .save_chart{
            width: 100%;
            height: 100%;
            border-right: 1px solid black;
        }
        .save_chart img{
            width: 10vh;
            height: 100%;
            cursor: pointer;
        }

        #middle_center{
            flex-direction: column;
            overflow: auto;
        }
        #middle_center input{
            width: 70%;
        }
        #middle_center ul li{
            background: linear-gradient(#82daff, #efd4ff);
            height: 15vh;
            border-bottom: 1px solid black;
            list-style: none;
            line-height: 15vh;
            text-align: center;
        }
        #chart_title,#chart_subtitle, #x_label, #y_label{
            height: 3vh;
            text-align: center;
        }
        .save_bt{
            width: 100%;
            background: #d2d2d2;
            cursor: pointer;
            font-family: "STFangsong";
            font-weight: bolder;
            color: #2f4056;
            font-size: 30px;
        }
        .curr_chart{
            opacity: 0.5;
        }
        #add_y{
            cursor: pointer;
            font-size: 20px;
        }
        #add_y:hover{
            color: white;
        }
        .y_rm{
            cursor:pointer;
        }
        #re_bt:hover{
            color: #8e1e1e;
        }
        #re_bt{
            width: 58%;
            background: linear-gradient(#eee8aa, #a6ff62);
            font-weight: bolder;
            color: #000080;
            font-size: 24px;
        }
        .curr_data{
            background: linear-gradient(#288ff3, #f7f1b6);
        }
        .c_data{
            background: linear-gradient(#b6dbff, #f7f1b6);
        }
        .preview_bt{
            cursor: pointer;
            padding-left: 35px;
            overflow: hidden;
        }
        .preview_bt:hover{
            color: white;
        }
        .stack_box{
            width: 50%;
            height: 100%;
            cursor: pointer;
        }
        #con, #sta{
            width: 100%;
            text-align: center;
        }
        .curr_is_stack{
            background: linear-gradient(#ab83ff, #ffbca7);
        }
        .option_box{
            width: 25%;
            height: 100%;
            cursor: pointer;
        }
        #clustering, #line_regression, #exponential_regression, #polynomial_regression{
            width: 100%;
            overflow: hidden;
        }
        #circle, #cardioid, #diamond, #triangle{
            width: 100%;
            overflow: hidden;
        }
        .option_box:hover{
            background: linear-gradient(#835ad4, #ff93d9);
        }
        .curr_option{
            background: linear-gradient(#835ad4, #ff93d9);
            color: white;
        }
        value li{
            cursor: pointer;
        }
    </style>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/echarts.js"></script>
    <script src="/js/china.js"></script>
    <script src="/js/ecStat.js"></script>
    <script src="/js/echarts-wordcloud.js"></script>
</head>
<body>
    <div id="main">
        <div id="left">
            <div id="left_top" title="点击重置">
                <img src="/images/preview.png" style="position: relative;left: 20px; top:13px" width=10% height=60%>
                <span id="left_title">表数据选择</span>
                <button id="re_bt">重&nbsp;置<br>选&nbsp;中</button>
            </div>
            <div id="left_center">
                <div id="left_center_left">
                    <ul>
                    {% for i in range(file_len) %}
                        <li style="background:linear-gradient(#262d3c, #667788);cursor: auto;">{{header[i]|safe}}表</li>
                        {% for j in range(cols[i] | length) %}
                             <li style="background:linear-gradient(#f7f1b6, #b6dbff); color:#1296db;font-family:微软雅黑" id="{{i|safe}}{{cols[i][j]|safe}}" class="col" index="{{j|safe}}" ondragstart="set_name(event)"
                              ondragend="col_recover(event)">{{cols[i][j]|safe}}</li>
                        {% endfor %}
                    {% endfor %}
                    </ul>
                </div>
                <div id="left_center_right">
                    <span id="left_center_right_title">字段数据</span>
                    <ul id="col_data">

                    </ul>
                </div>

            </div>
        </div>
        <div id="middle">
            <div id="middle_top">
                <img src="/images/premap.png" style="position: relative;left: 20px; top:8px" width=30% height=80%>
                <span id="preview_bt" class="preview_bt">&nbsp;&nbsp;&nbsp;&nbsp;预览视图</span>
            </div>
            <div id="middle_center">

            </div>
        </div>
        <div id="right">
            <div id="right_top">
                <div id="charts">
                    <div class="chart" title="点击制作柱状图"><img id="bar" src="/images/bar.png" style="width: 78%;height:78%;margin:10px 0px 0px 12px;"></div>
                    <div class="chart" title="点击制作折线图"><img id="line" src="/images/line.png" style="width: 82%;height:82%;margin:10px 0px 0px 12px;"></div>
                    <div class="chart" title="点击制作散点图"><img id="scatter" src="/images/scatter.png" style="width: 84%;height:88%;margin:10px 0px 0px 12px;"></div>
                    <div class="chart" title="点击制作饼图"><img id="pie" src="/images/pie.png" style="width: 80%;height:80%;margin:10px 0px 0px 12px;"></div>
                    <div class="chart" title="点击制作面积图"><img id="stack" src="/images/stack.png" style="width: 80%;height:80%;margin:10px 0px 0px 12px;"></div>
                    <div class="chart" title="点击制作雷达图"><img id="radar" src="/images/radar.png" style="width: 80%;height:80%;margin:10px 0px 0px 12px;"></div>
                    <div class="chart" title="点击制作中国地理图"><img id="map" src="/images/china.png" style="width: 80%;height:80%;margin:10px 0px 0px 12px;"></div>
                    <div class="chart" title="点击制作饼/线联动图"><img id="wordCloud" src="/images/wordCloud.png" style="width: 103%;height: 93%;margin: 0px 0px 0px 0px;"></div>
                </div>
                <div id="save_chart">
                    <button id="save_bt" class="save_bt layui-btn-disabled">
                        <img src="/images/save.png" style="width: 20%;height:45%;">
                        保存视图
                    </button>
                </div>
            </div>
            <div id="right_center">

            </div>
            <div id="right_bottom">
                <div id="right_bottom_left">
                    <div class="save_chart" id="save_chart0" ></div>
                    <div class="save_chart" id="save_chart1" ></div>
                    <div class="save_chart" id="save_chart2" ></div>
                    <div class="save_chart" id="save_chart3" ></div>
                    <div class="save_chart" id="save_chart4" ></div>
                    <div class="save_chart" id="save_chart5" ></div>
                    <div class="save_chart" id="save_chart6" ></div>
                    <div class="save_chart" id="save_chart7" ></div>
                    <div class="save_chart" id="save_chart8" ></div>
                    <div class="save_chart" id="save_chart9" ></div>
                </div>
                <div id="right_bottom_right" title="点击进入仪表盘界面">
                    <marquee  width="100" heigth="90" behavior="scroll" direction="right" scrollamount="20"> {# 滚动标签 #}
                         <img src='/images/next.png'>
                    </marquee>
                </div>
            </div>
        </div>

    </div>

</body>
<script>
    /* --------------列表删除函数------------------*/
    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
    /* --------------定义变量------------------*/
    var option;
    var chart = echarts.init(document.getElementById('right_center'));
    var save_charts = [];
    var y_count = 0;
    var chart_type;
    var curr_col = $(".col").first().attr('id').substr(1,);
    var curr_file = 0;
    var curr_chart = 'bar'
    var data_index_list = [];
    var curr_col_index = 0;
    var is_stack = '';
    var save_option = []
    var timeout;
    var curr_option;

    /* --------------词云颜色------------------*/
    function get_color () {
        return 'rgb(' + [
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160)
        ].join(',') + ')';
    }
    /* --------------选中聚类拟合等选项------------------*/
    function select_option(){
        if($(this).attr('class') === 'option_box'){
            $(".option_box").each(function(){
               $(this).attr('class', 'option_box');
            });
            $(this).attr('class', 'option_box curr_option');
            curr_option = $(this).children().attr('id');

        }else{
            $(this).attr('class', 'option_box');
            curr_option = '';
        }


    }


    /* --------------长按删除option------------------*/
    $(".save_chart").mousedown(function() {
        var target = $(this);
        timeout = setTimeout(function() {
            var index = target.attr('Id').substr(10,)
            save_charts[save_option.length-1].clear()
            save_option.remove(save_option[index]);
            // 重新渲染
            for(var i = 0 ;i < save_option.length; i++){
                save_charts[i].clear()
                save_charts[i].setOption(save_option[i]);
            }
            save_chart_index --;
            if(save_option.length > 0){
                chart.clear();
                chart.setOption(save_option[0]);
            }else{
                chart.clear();
            }
        }, 1500);
    });

    $(".save_chart").mouseup(function() {
        clearTimeout(timeout);
    });

    $(".save_chart").mouseout(function() {
        clearTimeout(timeout);
    });
    /* --------------监听点击并列或堆叠------------------*/
    function monitor_stack(){
        // 点击了并列
        if($(this).attr('id') == 'con_box' && $(this).attr('class') == 'stack_box'){
            $(this).attr('class', 'stack_box curr_is_stack');
            $('#sta_box').attr('class', 'stack_box');
            is_stack = '';
        // 点击了堆叠
        }else if($(this).attr('id') == 'sta_box' && $(this).attr('class') == 'stack_box'){
             $(this).attr('class', 'stack_box curr_is_stack');
             is_stack = '堆叠';
             $('#con_box').attr('class', 'stack_box');
        }
    }

    /* --------------点击预览调用相应函数------------------*/
    $('#preview_bt').click(function(){
        switch(curr_chart) {
                 case "bar":
                    bar_chart();
                    break;
                 case "stack":
                    stack_chart();
                    break;
                 case "line":
                    line_chart();
                    break;
                 case "scatter":
                    scatter_chart();
                    break;
                 case "pie":
                    pie_chart();
                    break;
                 case 'radar':
                    radar_chart();
                    break;
                 case 'map':
                    map_chart();
                    break;
                 case 'wordCloud':
                    wordCloud();
                    break;
            }
        $('#save_bt').css('background', 'linear-gradient(#eee8aa, #a6ff62)');
        $('#save_bt').css('color', '#401d1d');
        $('#save_bt').attr('class', 'save_bt');


    });

    /* --------------字段的数据点击后记录,并且改变样式------------------*/
    function click_data(){
        if($(this).attr('class') == 'c_data'){
             $(this).attr('class', 'curr_data');
             data_index_list.push($(this).attr('index'))
        }else{
            $(this).attr('class', 'c_data');
            data_index_list.remove($(this).attr('index'));
        }


    }


    /* --------------双击删除------------------*/
    function rm_y() {
        var t = $(this);
        t.remove();
        y_count --;
        if(y_count == 0){
            $('is_stack').css('display', 'none');
        }
    }
    /* --------------点击增加值------------------*/
    function add_value(){
        y_count++;
        $("value").append('<li class="y y_rm" title="双击删除">值</li>');

        var ym_boxes = document.getElementsByClassName("y_rm");

        [].forEach.call(ym_boxes,function(current,index){
            current.addEventListener("click",get_col,false);
            current.addEventListener("dblclick",rm_y,false);
            current.addEventListener("dragenter",enter_x_y,false);
            current.addEventListener("dragover",enter_x_y,false);
            current.addEventListener("dragleave",enter_x_y,false);
            current.addEventListener("drop",enter_x_y,false);
        });

        $('is_stack').css('display', 'block');
    }
    /* --------------点击参数------------------*/
    function add_parameter(){
        y_count++;
        $("value").append('<li class="y y_rm" title="双击删除">参数</li>');

        var ym_boxes = document.getElementsByClassName("y_rm");

        [].forEach.call(ym_boxes,function(current,index){
            current.addEventListener("click",get_col,false);
            current.addEventListener("dblclick",rm_y,false);
            current.addEventListener("dragenter",enter_x_y,false);
            current.addEventListener("dragover",enter_x_y,false);
            current.addEventListener("dragleave",enter_x_y,false);
            current.addEventListener("drop",enter_x_y,false);
        });

        $('is_stack').css('display', 'block');
    }
    /* --------------初始化------------------*/
    for(var i = 0; i < 10; i++){
        save_charts.push(echarts.init(document.getElementById('save_chart'+i)));
    }

    var chart_type;
    var save_chart_index = 0;
    var is_save = false;
    var data_index = 0;
    var is_get = true;
    /* --------------获取字段的数据------------------*/
    $('.col').click(function(){
        is_get = true;
        data_index = 0;
        curr_file = $(this).attr('Id').substr(0,1);
        curr_col = $(this).attr('Id').substr(0,1);
        curr_col_index = curr_col;
        // 发送请求过去该字段的数据
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/get_col_data/"+data_index,
            //数据，json字符串
            data :  JSON.stringify({
                'file_index': $(this).attr('Id').substr(0,1),
                'col': $(this).attr('Id').substr(1,)
            }),
            //请求成功
            success : function(result) {
                if(result.status === 'success'){
                    $('.col').css('color', '#1296db');
                    $('#'+result.col_name).css('color', 'red');
                    $('#col_data').html("");
                    var temp = '';
                    for(var i = 0; i < result.data.length; i++){
                        temp += '<li  class="c_data" id="c_'+i+'" index="'+i+'">'+result.data[i]+'</li>'
                    }
                    curr_rows = result.data.length;
                    $('#col_data').html(temp);
                    $("#col_data").children('li').bind('click', click_data);
                    // 将选中的数据进行重新渲染
                    for(var i = 0; i < data_index_list.length; i++){
                        $("#c_"+data_index_list[i]).attr('class', 'curr_data');

                    }

                }
                $(this).css('color', 'red');
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e);
            }
        });
    })
    /* --------------获取字段的数据------------------*/
    function get_col(){
        is_get = true;
        data_index = 0;
        curr_file = $(this).attr('index').substr(0,1);
        curr_col = $(this).attr('index').substr(0,1);
        curr_col_index = curr_col;
        // 发送请求过去该字段的数据
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/get_col_data/"+data_index,
            //数据，json字符串
            data :  JSON.stringify({
                'file_index': $(this).attr('index').substr(0,1),
                'col': $(this).attr('index').substr(1,)
            }),
            //请求成功
            success : function(result) {
                if(result.status === 'success'){
                    $('.col').css('color', '#1296db');
                    $('#'+result.col_name).css('color', 'red');
                    $('#col_data').html("");
                    var temp = '';
                    for(var i = 0; i < result.data.length; i++){
                        temp += '<li  class="c_data" id="c_'+i+'" index="'+i+'">'+result.data[i]+'</li>'
                    }
                    curr_rows = result.data.length;
                    $('#col_data').html(temp);
                    $("#col_data").children('li').bind('click', click_data);
                    // 将选中的数据进行重新渲染
                    for(var i = 0; i < data_index_list.length; i++){
                        $("#c_"+data_index_list[i]).attr('class', 'curr_data');

                    }

                }
                $(this).css('color', 'red');
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e);
            }
        });
    }
    // 面积图被点击
    $('#stack').click(function(){
        curr_chart = 'stack';
        is_stack = '';
        $("#middle_title").text("面积图参数");
        y_count = 0;
        $('.chart').children('img').css("opacity", "1");
        $('#stack').css("opacity", "0.5");
         var temp = '<ul><li style="font-size: 24px; font-weight: bold">面积图参数</li>'+
                    '<ul><li><input id="chart_title" type="text" placeholder="标题"></li>'+
                    '<li><input id="chart_subtitle" type="text" placeholder="小标题"></li>'+
                    '<li id="x" is_have="f">名称</li>'+
                    '<li id="y" class="y" is_have="f">值</li><value title="双击删除"></value>'+
                    '<li id="add_y">点击增加值</li>'+
                    '<is_stack><li style="flex-direction: row;">'+
                    '<div class="stack_box curr_is_stack" id="con_box"><span id="con">并列</span>'+
                    '</div><div class="stack_box" id="sta_box"><span id="sta">堆叠</span></div></li></is_stack>'+
                    '<li><input id="x_label" type="text" placeholder="X"></li>'+
                    '<li><input id="y_label" type="text" placeholder="Y标签"></li>'+
                    '<li><input type="checkbox" style="width:20px;" name="legend" id="legend">图例显示'+
                    '<li><input type="checkbox" style="width:20px;" name="max" id="max">最大值'+
                    '<li><input type="checkbox" style="width:20px;" name="min" id="min">最小值'+
                    '<li><input type="checkbox" style="width:20px;" name="avg" id="avg">平均值'+
                '</ul>'
        $("#middle_center").html(temp);
        $('#x').bind('click', get_col);
        $('#y').bind('click', get_col);
        $('.col').attr("draggable","true");
        $("#add_y").bind('click',add_value);
        $('is_stack').css('display', 'none');
        $('.stack_box').bind('click', monitor_stack);
        // 添加事件监听
        var x_box = document.getElementById("x");
        var y_box = document.getElementById("y");
        x_box.addEventListener("dragenter",enter_x_y,false);
        x_box.addEventListener("dragover",enter_x_y,false);
        x_box.addEventListener("dragleave",enter_x_y,false);
        x_box.addEventListener("drop",enter_x_y,false);
        y_box.addEventListener("dragenter",enter_x_y,false);
        y_box.addEventListener("dragover",enter_x_y,false);
        y_box.addEventListener("dragleave",enter_x_y,false);
        y_box.addEventListener("drop",enter_x_y,false);
        curr_chart = 'stack';
    })
    // 柱状图被点击
    $('#bar').click(function(){
        curr_chart = 'bar';
        is_stack = '';
        y_count = 0;
        $('.chart').children('img').css("opacity", "1");
        $('#bar').css("opacity", "0.5");
        var temp =  '<ul><li style="font-size: 24px; font-weight: bold">柱状图参数</li>'+
                    '<li><input id="chart_title" type="text" placeholder="标题"></li>'+
                    '<li><input id="chart_subtitle" type="text" placeholder="小标题"></li>'+
                    '<li id="x" is_have="f">名称</li>'+
                    '<li id="y" class="y" is_have="f">值</li><value title="双击删除"></value>'+
                    '<li id="add_y">点击增加值</li>'+
                    '<is_stack><li style="flex-direction: row;">'+
                    '<div class="stack_box curr_is_stack" id="con_box"><span id="con">并列</span>'+
                    '</div><div class="stack_box" id="sta_box"><span id="sta">堆叠</span></div></li></is_stack>'+
                    '<li><input id="x_label" type="text" placeholder="X标签"></li>'+
                    '<li><input id="y_label" type="text" placeholder="Y标签"></li>'+
                    '<li><input type="checkbox" style="width:20px;" name="legend" id="legend">图例显示'+
                    '<li><input type="checkbox" style="width:20px;" name="max" id="max">最大值'+
                    '<li><input type="checkbox" style="width:20px;" name="min" id="min">最小值'+
                    '<li><input type="checkbox" style="width:20px;" name="avg" id="avg">平均值'+
                '</ul>'
        $("#middle_center").html(temp);
        $('#x').bind('click', get_col);
        $('#y').bind('click', get_col);
        $('is_stack').css('display', 'none');
        $('.stack_box').bind('click', monitor_stack);
        $("#add_y").bind('click',add_value);
        $('.col').attr("draggable","true");
        // 添加事件监听
        var x_box = document.getElementById("x");
        var y_box = document.getElementById("y");
        x_box.addEventListener("dragenter",enter_x_y,false);
        x_box.addEventListener("dragover",enter_x_y,false);
        x_box.addEventListener("dragleave",enter_x_y,false);
        x_box.addEventListener("drop",enter_x_y,false);
        y_box.addEventListener("dragenter",enter_x_y,false);
        y_box.addEventListener("dragover",enter_x_y,false);
        y_box.addEventListener("dragleave",enter_x_y,false);
        y_box.addEventListener("drop",enter_x_y,false);
        curr_chart = 'bar';
    })
    // 雷达图被点击
    $('#radar').click(function(){
        curr_chart = 'radar';
        y_count = 0;
        $('.chart').children('img').css("opacity", "1");
        $('#radar').css("opacity", "0.5");
        var temp =  '<ul><li style="font-size: 24px; font-weight: bold">雷达图参数</li>'+
                    '<li><input id="chart_title" type="text" placeholder="标题"></li>'+
                    '<li><input id="chart_subtitle" type="text" placeholder="小标题"></li>'+
                    '<li id="x" is_have="f">名称</li>'+
                    '<value><li id="y1" class="y" is_have="f">参数</li>'+
                    '<li id="y2" class="y" is_have="f">参数</li>'+
                    '<li id="y3" class="y" is_have="f">参数</li></value>'+
                    '<li id="add_p">点击增加参数</li>'+
                    '<li><input type="checkbox" style="width:20px;" name="legend" id="legend">图例显示'+
                '</ul>'
        $("#middle_center").html(temp);
        $("#add_p").bind('click',add_parameter);
        $('.col').attr("draggable","true");
        // 添加事件监听
        $('#x').bind('click', get_col);
        $('#y1').bind('click', get_col);
        $('#y2').bind('click', get_col);
        $('#y3').bind('click', get_col);
        var x_box = document.getElementById("x");
        x_box.addEventListener("dragenter",enter_x_y,false);
        x_box.addEventListener("dragover",enter_x_y,false);
        x_box.addEventListener("dragleave",enter_x_y,false);
        x_box.addEventListener("drop",enter_x_y,false);
        var ym_boxes = document.getElementsByClassName("y");
        [].forEach.call(ym_boxes,function(current,index){
            current.addEventListener("dblclick",rm_y,false);
            current.addEventListener("dragenter",enter_x_y,false);
            current.addEventListener("dragover",enter_x_y,false);
            current.addEventListener("dragleave",enter_x_y,false);
            current.addEventListener("drop",enter_x_y,false);
        });
        curr_chart = 'radar';
    })
    // 地图被点击
    $('#map').click(function(){
        curr_chart = 'map';
        y_count = 0;
        $('.chart').children('img').css("opacity", "1");
        $('#map').css("opacity", "0.5");
        var temp =  '<ul><li style="font-size: 24px; font-weight: bold">地图参数</li>'+
                    '<li><input id="chart_title" type="text" placeholder="标题"></li>'+
                    '<li><input id="chart_subtitle" type="text" placeholder="小标题"></li>'+
                    '<li id="x" is_have="f">地区</li>'+
                    '<value><li id="y" class="y" is_have="f">值</li></value>'+
                    '<li><input type="checkbox" style="width:20px;" name="is_bar" id="is_bar">条形图'+
                '</ul>'
        $("#middle_center").html(temp);
        $('.col').attr("draggable","true");
        // 添加事件监听
        $('#x').bind('click', get_col);
        $('#y').bind('click', get_col);
        var x_box = document.getElementById("x");
        x_box.addEventListener("dragenter",enter_x_y,false);
        x_box.addEventListener("dragover",enter_x_y,false);
        x_box.addEventListener("dragleave",enter_x_y,false);
        x_box.addEventListener("drop",enter_x_y,false);
        var y_box = document.getElementById("y");
        y_box.addEventListener("dragenter",enter_x_y,false);
        y_box.addEventListener("dragover",enter_x_y,false);
        y_box.addEventListener("dragleave",enter_x_y,false);
        y_box.addEventListener("drop",enter_x_y,false);
    })
    // 词云被点击
    $('#wordCloud').click(function(){
        curr_option = 'circles';
        curr_chart = 'wordCloud';
        y_count = 0;
        $('.chart').children('img').css("opacity", "1");
        $('#wordCloud').css("opacity", "0.5");
         var temp =  '<ul><li style="font-size: 24px; font-weight: bold">词云图参数</li>'+
                    '<ul><li><input id="chart_title" type="text" placeholder="标题"></li>'+
                    '<li><input id="chart_subtitle" type="text" placeholder="小标题"></li>'+
                    '<li id="y" class="y" is_have="f">值</li><value title="双击删除"></value>'+
                    '<li id="add_y">点击增加值</li>'+
                    '<li><div class="option_box"><span id="circle">默认</span>'+
                    '</div><div class="option_box"><span id="cardioid">心形</span></div>'+
                    '<div class="option_box"><span id="diamond">菱形</span></div>'+
                    '<div class="option_box"><span id="triangle">三角形</span></div></li>'+
                '</ul>'
        $("#middle_center").html(temp);
        $('#y').bind('click', get_col);
        $('.option_box').bind('click', select_option);
        $("#add_y").bind('click',add_value);
        $('.col').attr("draggable","true");
        $('.chart').children('img').css("opacity", "1");
        $('#wordCloud').css("opacity", "0.5");
        // 添加事件监听
        var y_box = document.getElementById("y");
        y_box.addEventListener("dragenter",enter_x_y,false);
        y_box.addEventListener("dragover",enter_x_y,false);
        y_box.addEventListener("dragleave",enter_x_y,false);
        y_box.addEventListener("drop",enter_x_y,false);
    })
    // 折线图被点击
    $('#line').click(function(){
        curr_chart = 'line';
        is_stack = '';
        y_count = 0;
        $("#middle_title").text("折线图参数");
        $('.chart').children('img').css("opacity", "1");
        $('#bar').css("opacity", "0.5");
        var temp =  '<ul><li style="font-size: 24px; font-weight: bold">折线图参数</li>'+
                    '<ul><li><input id="chart_title" type="text" placeholder="标题"></li>'+
                    '<li><input id="chart_subtitle" type="text" placeholder="小标题"></li>'+
                    '<li id="x" is_have="f">名称</li>'+
                    '<li id="y" class="y" is_have="f">值</li><value title="双击删除"></value>'+
                    '<li id="add_y">点击增加值</li>'+
                    '<is_stack><li style="flex-direction: row;">'+
                    '<div class="stack_box curr_is_stack" id="con_box"><span id="con">并列</span>'+
                    '</div><div class="stack_box" id="sta_box"><span id="sta">堆叠</span></div></li></is_stack>'+
                    '<li><input id="x_label" type="text" placeholder="X标签"></li>'+
                    '<li><input id="y_label" type="text" placeholder="Y标签"></li>'+
                    '<li><input type="checkbox" style="width:20px;" name="legend" id="legend">图例显示'+
                    '<li><input type="checkbox" style="width:20px;" name="max" id="max">最大值'+
                    '<li><input type="checkbox" style="width:20px;" name="min" id="min">最小值'+
                    '<li><input type="checkbox" style="width:20px;" name="avg" id="avg">平均值'+
                '</ul>'
        $("#middle_center").html(temp);
        $('is_stack').css('display', 'none');
        $('.stack_box').bind('click', monitor_stack);
        $("#add_y").bind('click',add_value);
        $('.col').attr("draggable","true");
        $('.chart').children('img').css("opacity", "1");
        $('#line').css("opacity", "0.5");
        // 添加事件监听
        $('#x').bind('click', get_col);
        $('#y').bind('click', get_col);
        var x_box = document.getElementById("x");
        var y_box = document.getElementById("y");
        x_box.addEventListener("dragenter",enter_x_y,false);
        x_box.addEventListener("dragover",enter_x_y,false);
        x_box.addEventListener("dragleave",enter_x_y,false);
        x_box.addEventListener("drop",enter_x_y,false);
        y_box.addEventListener("dragenter",enter_x_y,false);
        y_box.addEventListener("dragover",enter_x_y,false);
        y_box.addEventListener("dragleave",enter_x_y,false);
        y_box.addEventListener("drop",enter_x_y,false);
        curr_chart = 'line';
    })
    // 散点图被点击
    $('#scatter').click(function(){
        curr_option = '';
        curr_chart = 'scatter';
        $("#middle_title").text("散点图参数");
        $('.chart').children('img').css("opacity", "1");
        $('#scatter').css("opacity", "0.5");
        var temp =  '<ul><li style="font-size: 24px; font-weight: bold">散点图参数</li>'+
                    '<ul><li><input id="chart_title" type="text" placeholder="标题"></li>'+
                    '<li><input id="chart_subtitle" type="text" placeholder="小标题"></li>'+
                    '<li id="x">X</li>'+
                    '<li id="y" class="y">Y</li>'+
                    '<li><input id="x_label" type="text" placeholder="X标签"></li>'+
                    '<li><input id="y_label" type="text" placeholder="Y标签"></li>'+
                    '<li style="flex-direction: row;">'+
                    '<div class="option_box"><span id="clustering">聚类</span>'+
                    '</div><div class="option_box"><span id="line_regression">线性回归</span></div>'+
                    '<div class="option_box"><span id="exponential_regression">指数回归</span></div>'+
                    '<div class="option_box"><span id="polynomial_regression">多项式回归</span></div></li>'+
                '</ul>'
        $("#middle_center").html(temp);
        $('.col').attr("draggable","true");
        // 添加事件监听
        $('#x').bind('click', get_col);
        $('#y').bind('click', get_col);
        $('.option_box').bind('click', select_option);
        var x_box = document.getElementById("x");
        var y_box = document.getElementById("y");
        x_box.addEventListener("dragenter",enter_x_y,false);
        x_box.addEventListener("dragover",enter_x_y,false);
        x_box.addEventListener("dragleave",enter_x_y,false);
        x_box.addEventListener("drop",enter_x_y,false);
        y_box.addEventListener("dragenter",enter_x_y,false);
        y_box.addEventListener("dragover",enter_x_y,false);
        y_box.addEventListener("dragleave",enter_x_y,false);
        y_box.addEventListener("drop",enter_x_y,false);
        curr_chart = 'scatter';
    })
    // 饼图被点击
    $('#pie').click(function(){
        curr_chart = 'pie';
        $("#middle_title").text("饼图参数");
        $('.chart').children('img').css("opacity", "1");
        $('#pie').css("opacity", "0.5");
        var temp =  '<ul><li style="font-size: 24px; font-weight: bold">饼图参数</li>'+
                    '<ul><li><input id="chart_title" type="text" placeholder="图标题"></li>'+
                    '<li><input id="chart_subtitle" type="text" placeholder="小标题"></li>'+
                    '<li id="x">key</li>'+
                    '<li id="y" class="y">value</li>'+
                    '<li><input type="checkbox" style="width:20px;" name="legend" id="legend">图例显示'+
                    '<li><input type="checkbox" style="width:20px;" name="rose" id="rose">玫瑰图'+
                '</ul>'
        $("#middle_center").html(temp);
        $('.col').attr("draggable","true");
        // 添加事件监听
        $('#x').bind('click', get_col);
        $('#y').bind('click', get_col);
        var x_box = document.getElementById("x");
        var y_box = document.getElementById("y");
        x_box.addEventListener("dragenter",enter_x_y,false);
        x_box.addEventListener("dragover",enter_x_y,false);
        x_box.addEventListener("dragleave",enter_x_y,false);
        x_box.addEventListener("drop",enter_x_y,false);
        y_box.addEventListener("dragenter",enter_x_y,false);
        y_box.addEventListener("dragover",enter_x_y,false);
        y_box.addEventListener("dragleave",enter_x_y,false);
        y_box.addEventListener("drop",enter_x_y,false);
        curr_chart = 'pie';
    })
    /* --------------------拖拽事件-------------------------*/
    function set_name(e){
        if($("#x").text() === '名称' || $("#x").text() === 'X' || $("#x").text() === 'key'){
            $("#x").css('background','linear-gradient(rgb(243 120 173), rgb(239, 212, 255))');
            $("#x").text('拖拽入此作名称');
        }else if($("#x").text() === '地区'){
            $("#x").css('background','linear-gradient(rgb(243 120 173), rgb(239, 212, 255))');
            $("#x").text('拖拽入此作地区');
        }
         $(".y").each(function(){
            if($(this).text() === '值' || $(this).text() === 'Y' || $(this).text() === 'value'){
                $(this).css('background','linear-gradient(rgb(243 120 173), rgb(239, 212, 255))');
                $(this).text('拖拽入此作值');
            }
         });
         $(".y").each(function(){
            if($(this).text() === '参数'){
                $(this).css('background','linear-gradient(rgb(243 120 173), rgb(239, 212, 255))');
                $(this).text('拖拽入此参数');
            }
         });

        e.dataTransfer.setData("col_id", e.target.id);
        e.dataTransfer.setData("col_name", e.target.innerText);
        e.dataTransfer.setData("col_class", e.target.className);
    }
    function col_recover(e){
        if(curr_chart == 'pie'){
            if($("#x").text() === '拖拽入此作名称'){
                $("#x").css('background','linear-gradient(#82daff, #efd4ff)');
                $("#x").text('key');
            }
            $(".y").each(function(){
                if($(this).text() === '拖拽入此作值'){
                    $(this).css('background','linear-gradient(#82daff, #efd4ff)');
                    $(this).text('value');
                }
             });
         }else if(curr_chart == 'radar'){
            if($("#x").text() === '拖拽入此作名称'){
                $("#x").css('background','linear-gradient(#82daff, #efd4ff)');
                $("#x").text('名称');
            }
            $(".y").each(function(){
                if($(this).text() === '拖拽入此参数'){
                    $(this).css('background','linear-gradient(#82daff, #efd4ff)');
                    $(this).text('参数');
                }
             });
         }else if(curr_chart == 'map'){
            if($("#x").text() === '拖拽入此作地区'){
                $("#x").css('background','linear-gradient(#82daff, #efd4ff)');
                $("#x").text('地区');
            }
            $("#y").each(function(){
                if($(this).text() === '拖拽入此作值'){
                    $(this).css('background','linear-gradient(#82daff, #efd4ff)');
                    $(this).text('值');
                }
             });
         }else{
             if($("#x").text() === '拖拽入此作名称'){
                $("#x").css('background','linear-gradient(#82daff, #efd4ff)');
                $("#x").text('X');
            }
            $(".y").each(function(){
                if($(this).text() === '拖拽入此作值'){
                    $(this).css('background','linear-gradient(#82daff, #efd4ff)');
                    $(this).text('Y');
                }
             });
         }
    }

    // 拖拽进入名称或值
    function enter_x_y(e){
        e.preventDefault();//阻止浏览器的默认事件
        switch(e.type){
            // 进入目标元素
            case 'dragenter':
                break;
            // 经过目标元素
            case 'dragover':
                break;
            // 离开目标元素
            case 'dragleave':

                break;
            // 释放元素
            case 'drop':
                var col_name = e.dataTransfer.getData("col_name");
                var col_id = e.dataTransfer.getData("col_id");
                var col_class = e.dataTransfer.getData("col_class");
                if(col_class === 'col'){
                    e.target.innerText = col_name;
                    e.target.setAttribute('is_have', 't')
                    e.target.setAttribute('index', col_id)
                    e.target.is_have = 't';
                    if(e.target.id == "x"){
                        e.target.className = col_id;
                    }else{
                        e.target.className = col_id+" y y_rm";
                    }
                }
                e.dataTransfer.clearData("col_name");
                e.dataTransfer.clearData("col_id");
                e.dataTransfer.clearData("col_class");
                break;
        }
    }

    //点击预览 折线图
    function line_chart(){
        option = {}
        chart_type = "line";
        var ys = "";
        var can_view = true;
        if($('#x').attr('is_have') == 'f'){
            can_view = false;
        }
        $(".y").each(function(){
            if($(this).attr('is_have') == 'f'){
                can_view = false;
            }
        });
        if(can_view){
            $(".y").each(function(){
                if($(this).text() != '值'){
                    ys += $(this).attr('class')+" ";
                }
            });
            // 尝试绘图获取x/值数据
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/get_x_y",
                //数据，json字符串
                data :  JSON.stringify({
                    'x': $('#x').attr('class'),
                    'ys': ys,
                    'title': $("#chart_title").val(),
                    'subtitle': $("#chart_subtitle").val(),
                    'x_label': $('#x_label').val(),
                    'y_label': $('#y_label').val(),
                    'chart_type': chart_type,
                    'max': $("#max").is(":checked"),
                    'min': $("#min").is(":checked"),
                    'avg': $("#avg").is(":checked"),
                    'is_stack': is_stack,
                    'data_index_list': data_index_list
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        chart.clear();
                        if($("#legend").is(":checked") === true){
                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,

                                },
                                xAxis: {
                                    name: result.x_label,
                                    type: 'category',
                                    data: result.x_data
                                },
                                yAxis: {
                                    type: 'value',
                                    name: result.y_label,
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                legend: {
                                },
                                dataZoom: [{}],
                                series:JSON.parse(result.series)
                            }
                        }else{
                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.title,

                                },
                                xAxis: {
                                    name: result.x_label,
                                    type: 'category',
                                    data: result.x_data
                                },
                                yAxis: {
                                    type: 'value',
                                    name: result.y_label,
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                dataZoom: [{}],
                                series:JSON.parse(result.series)

                            }
                        }
                        chart.setOption(option);

                        is_save = true;
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
        }
    }
    //点击预览 词云
    function wordCloud(){
        option = {}
        chart_type = "wordCloud";
        var ys = "";
        var can_view = true;
        if($('#x').attr('is_have') == 'f'){
            can_view = false;
        }
        $(".y").each(function(){
            if($(this).attr('is_have') == 'f'){
                can_view = false;
            }
        });
        if(can_view){
            $(".y").each(function(){
                if($(this).text() != '值'){
                    ys += $(this).attr('class')+" ";
                }
            });
            // 尝试绘图获取x/值数据
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/get_w_c",
                //数据，json字符串
                data :  JSON.stringify({
                    'ys': ys,
                    'title': $("#chart_title").val(),
                    'subtitle': $("#chart_subtitle").val(),
                    'shape': curr_option,
                    'data_index_list': data_index_list
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        chart.clear();
                        option = {
                            title: {
                                text:  result.title,
                                subtext: result.subtitle,
                                x: 'center',
                                textStyle: {
                                    fontSize: 23
                                }

                            },
                            backgroundColor: '#F7F7F7',
                            tooltip: {
                                show: true
                            },
                            series: [{
                                type: 'wordCloud',
                                //size: ['9%', '99%'],
                                sizeRange: [6, 66],
                                //textRotation: [0, 45, 90, -45],
                                rotationRange: [-45, 90],
                                shape: result.shape,
                                textPadding: 0,
                                autoSize: {
                                    enable: true,
                                    minSize: 6
                                },
                                textStyle: {
                                    fontFamily: 'sans-serif',
                                    fontWeight: 'bold',
                                    // Color can be a callback function or a color string
                                    color: function () {
                                        // Random color
                                        return 'rgb(' + [
                                            Math.round(Math.random() * 160),
                                            Math.round(Math.random() * 160),
                                            Math.round(Math.random() * 160)
                                        ].join(',') + ')';
                                    }
                                },
                                emphasis: {
                                    focus: 'self',

                                    textStyle: {
                                        shadowBlur: 10,
                                        shadowColor: '#333'
                                    }
                                },
                                data: [{
                                    name: "Jayfee",
                                    value: 666
                                }, {
                                    name: "Nancy",
                                    value: 520
                                }]
                            }]
                        };

                        option.series[0].data = JSON.parse(result.data);
                        chart.setOption(option);

                        is_save = true;
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
        }
    }
    //点击预览 雷达图
    function radar_chart(){
        option = {}
        chart_type = "radar";
        var ys = "";
        var can_view = true;
        if($('#x').attr('is_have') == 'f'){
            can_view = false;
        }
        $(".y").each(function(){
            if($(this).attr('is_have') == 'f'){
                can_view = false;
            }
        });
        if(can_view){
            $(".y").each(function(){
                if($(this).text() != '参数'){
                    ys += $(this).attr('class')+" ";
                }
            });
            // 尝试绘图获取x/值数据
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/get_x_y",
                //数据，json字符串
                data :  JSON.stringify({
                    'x': $('#x').attr('class'),
                    'ys': ys,
                    'title': $("#chart_title").val(),
                    'subtitle': $("#chart_subtitle").val(),
                    'chart_type': chart_type,
                    'data_index_list': data_index_list
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        chart.clear();
                        if($("#legend").is(":checked") === true){
                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,
                                    left: 'center'
                                },
                                 radar: {
                                    indicator: JSON.parse(result.indicator)
                                },
                                tooltip: {
                                    trigger: 'axis',
                                },
                                legend: {
                                    data: result.legend,
                                    orient: 'vertical',
                                    left: 'left',
                                },
                                series: [{
                                    type: 'radar',
                                    data: JSON.parse(result.radar_data)
                                }]
                            }
                        }else{
                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,
                                    left: 'center'
                                },
                                 radar: {
                                    indicator: JSON.parse(result.indicator)
                                },
                                tooltip: {
                                    trigger: 'axis',
                                },
                                series:[{
                                    type: 'radar',
                                    data: JSON.parse(result.radar_data)
                                }]

                            }
                        }
                        chart.setOption(option);

                        is_save = true;
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
        }
    }
    //点击预览 地图
    function  map_chart(){
        option = {}
        chart_type = "map";
        var ys = "";
        var can_view = true;
        if($('#x').attr('is_have') == 'f'){
            can_view = false;
        }
        $(".y").each(function(){
            if($(this).attr('is_have') == 'f'){
                can_view = false;
            }
        });
        if(can_view){
            $(".y").each(function(){
                if($(this).text() != '值'){
                    ys += $(this).attr('class')+" ";
                }
            });
            // 尝试绘图获取x/值数据
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/get_x_y",
                //数据，json字符串
                data :  JSON.stringify({
                    'x': $('#x').attr('class'),
                    'ys': ys,
                    'title': $("#chart_title").val(),
                    'subtitle': $("#chart_subtitle").val(),
                    'chart_type': chart_type,
                    'data_index_list': data_index_list
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        chart.clear();
                        var data = JSON.parse(result.map_data)
                        if($("#is_bar").is(":checked") === true){
                            var yData = [];
                            data.sort(function(o1, o2) {
                                if (isNaN(o1.value) || o1.value == null) return -1;
                                if (isNaN(o2.value) || o2.value == null) return 1;
                                return o1.value - o2.value;
                            });

                            for (var i = 0; i < data.length; i++) {
                                yData.push(data[i].name);
                            }

                            option = {
                            title: {

                                text: result.title,
                                subtext: result.subtitle,
                                textStyle: {
                                    fontSize: 30
                                },
                                x: 'center'
                            },
                            tooltip: {
                                show: true,
                                formatter: function(params) {
                                    return params.name + '：' + params.data['value']
                                },
                            },
                            visualMap: {
                                type: 'continuous',
                                text: ['', ''],
                                showLabel: true,
                                seriesIndex: [0],
                                min: result.min_,
                                max: result.max_,
                                inRange: {
                                    color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096', ]
                                },
                                textStyle: {
                                    color: '#000'
                                },
                                bottom: 30,
                                left: 'left',
                            },
                            grid: {
                                right: 10,
                                top: 80,
                                bottom: 30,
                                width: '20%'
                            },
                            xAxis: {
                                type: 'value',
                                scale: true,
                                position: 'top',
                                splitNumber: 1,
                                boundaryGap: false,
                                splitLine: {
                                    show: false
                                },
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    margin: 2,
                                    textStyle: {
                                        color: '#aaa'
                                    }
                                }
                            },
                            yAxis: {
                                type: 'category',
                                nameGap: 16,
                                axisLine: {
                                    show: false,
                                    lineStyle: {
                                        color: '#ddd'
                                    }
                                },
                                axisTick: {
                                    show: false,
                                    lineStyle: {
                                        color: '#ddd'
                                    }
                                },
                                axisLabel: {
                                    interval: 0,
                                    textStyle: {
                                        color: '#999'
                                    }
                                },
                                data: yData
                            },
                            geo: {
                                roam: false,
                                map: 'china',
                                left: 'left',
                                right:'300',
                                layoutSize: '80%',
                                label: {
                                    emphasis: {
                                        show: false
                                    }
                                },
                                itemStyle: {
                                    emphasis: {
                                        areaColor: '#fff464'
                                    }
                                },
                                regions: [{
                                    name: '南海诸岛',
                                    value: 0,
                                    itemStyle: {
                                        normal: {
                                            opacity: 0,
                                            label: {
                                                show: false
                                            }
                                        }
                                    }
                                }],
                            },
                            series: [{
                                name: 'mapSer',
                                type: 'map',
                                roam: false,
                                geoIndex: 0,
                                label: {
                                    show: false,
                                },
                                data: data
                            }, {
                                name: 'barSer',
                                type: 'bar',
                                roam: false,
                                visualMap: false,
                                zlevel: 2,
                                barMaxWidth: 20,
                                itemStyle: {
                                    normal: {
                                        color: '#40a9ed'
                                    },
                                    emphasis: {
                                        color: "#3596c0"
                                    }
                                },
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'right',
                                        offset: [0, 10]
                                    },
                                    emphasis: {
                                        show: true,
                                        position: 'right',
                                        offset: [10, 0]
                                    }
                                },
                                data: data
                            }]
                        };
                        }else{
                            var yData = [];

                            data.sort(function(o1, o2) {
                                if (isNaN(o1.value) || o1.value == null) return -1;
                                if (isNaN(o2.value) || o2.value == null) return 1;
                                return o1.value - o2.value;
                            });

                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,
                                    textStyle: {
                                        fontSize: 30
                                    },
                                    x: 'center'
                                },
                                tooltip: {
                                    show: true,
                                    formatter: function(params) {
                                        return params.name + '：' + params.data['value']
                                    },
                                },
                                visualMap: {
                                    type: 'continuous',
                                    text: ['', ''],
                                    showLabel: true,
                                    seriesIndex: [0],
                                    min: result.min_,
                                    max: result.max_,
                                    inRange: {
                                        color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096', ]
                                    },
                                    textStyle: {
                                        color: '#000'
                                    },
                                    bottom: 30,
                                    left: 'left',
                                },
                                grid: {
                                    right: 10,
                                    top: 80,
                                    bottom: 30,
                                    width: '20%'
                                },
                                xAxis: {
                                    type: 'value',
                                    scale: true,
                                    position: 'top',
                                    splitNumber: 1,
                                    boundaryGap: false,
                                    splitLine: {
                                        show: false
                                    },
                                    axisLine: {
                                        show: false
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    axisLabel: {
                                        margin: 2,
                                        textStyle: {
                                            color: '#aaa'
                                        }
                                    }
                                },
                                yAxis: {
                                    type: 'category',
                                    nameGap: 16,
                                    axisLine: {
                                        show: false,
                                        lineStyle: {
                                            color: '#ddd'
                                        }
                                    },
                                    axisTick: {
                                        show: false,
                                        lineStyle: {
                                            color: '#ddd'
                                        }
                                    },
                                    axisLabel: {
                                        interval: 0,
                                        textStyle: {
                                            color: '#999'
                                        }
                                    },
                                    data: yData
                                },
                                geo: {
                                    roam: false,
                                    map: 'china',
                                    left: 'center',
                                    layoutSize: '80%',
                                    label: {
                                        emphasis: {
                                            show: false
                                        }
                                    },
                                    itemStyle: {
                                        emphasis: {
                                            areaColor: '#fff464'
                                        }
                                    },
                                    regions: [{
                                        name: '南海诸岛',
                                        value: 0,
                                        itemStyle: {
                                            normal: {
                                                opacity: 0,
                                                label: {
                                                    show: false
                                                }
                                            }
                                        }
                                    }],
                                },
                                series: [{
                                    name: 'mapSer',
                                    type: 'map',
                                    roam: false,
                                    geoIndex: 0,
                                    label: {
                                        show: false,
                                    },
                                    data: data
                                }]
};
                        }
                        chart.setOption(option);

                        is_save = true;
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
        }
    }
    //点击预览 面积图
    function stack_chart(){
        option = {}
        chart_type = "stack";
        var ys = "";
        var can_view = true;
        if($('#x').attr('is_have') == 'f'){
            can_view = false;
        }
        $(".y").each(function(){
            if($(this).attr('is_have') == 'f'){
                can_view = false;
            }
        });
        if(can_view){
            $(".y").each(function(){
                if($(this).text() != '值'){
                    ys += $(this).attr('class')+" ";
                }
            });
            // 尝试绘图获取x/值数据
            $.ajax({
                // 请求方式
                type : "POST",
                // 请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                // 请求地址
                url : "/get_x_y",
                // 数据，json字符串
                data :  JSON.stringify({
                    'x': $('#x').attr('class'),
                    'ys': ys,
                    'title': $("#chart_title").val(),
                    'subtitle': $("#chart_subtitle").val(),
                    'x_label': $('#x_label').val(),
                    'y_label': $('#y_label').val(),
                    'chart_type': chart_type,
                    'max': $("#max").is(":checked"),
                    'min': $("#min").is(":checked"),
                    'avg': $("#avg").is(":checked"),
                    'data_index_list': data_index_list
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        chart.clear();
                        if($("#legend").is(":checked") === true){
                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,

                                },
                                xAxis: {
                                    name: result.x_label,
                                    type: 'category',
                                    data: result.x_data
                                },
                                yAxis: {
                                    type: 'value',
                                    name: result.y_label,
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                legend: {
                                },
                                dataZoom: [{}],
                                series:JSON.parse(result.series)
                            }
                        }else{
                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.title,

                                },
                                xAxis: {
                                    name: result.x_label,
                                    type: 'category',
                                    data: result.x_data
                                },
                                yAxis: {
                                    type: 'value',
                                    name: result.y_label,
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                dataZoom: [{}],
                                series:JSON.parse(result.series)

                            }
                        }
                        chart.setOption(option);

                        is_save = true;
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
        }
    }
    //点击预览 饼图
    function pie_chart(){
        option = {}
        if( $('#x').text() != 'key' && $('#y').text() != 'value'){
            // 尝试绘图获取x/值数据
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/get_k_v",
                //数据，json字符串
                data :  JSON.stringify({
                    'k': $('#x').attr('class'),
                    'v': $('#y').attr('class'),
                    'title': $("#chart_title").val(),
                    'subtitle': $("#chart_subtitle").val(),
                    'data_index_list': data_index_list
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        chart.clear();
                        if($("#legend").is(":checked") && $("#rose").is(":checked")){
                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left',
                                },
                                series: [
                                    {
                                        type: 'pie',
                                        radius: '50%',
                                        data: result.data,
                                        roseType: 'area',
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                        }else if($("#legend").is(":checked") && $("#rose").is(":checked") == false){
                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left',
                                },
                                series: [
                                    {
                                        type: 'pie',
                                        radius: '50%',
                                        data: result.data,
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                        }else if($("#legend").is(":checked") == false && $("#rose").is(":checked") == false){
                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'item'
                                },
                                series: [
                                    {
                                        type: 'pie',
                                        radius: '50%',
                                        data: result.data,
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                        }else{
                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'item'
                                },
                                series: [
                                    {
                                        type: 'pie',
                                        radius: '50%',
                                        data: result.data,
                                        roseType: 'area',
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                        }
                        chart.clear();
                        chart.setOption(option);

                        is_save = true;
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
        }
    }
    //点击预览 柱状图
    function bar_chart(){

        chart_type = "bar";
        var ys = "";
        var can_view = true;
        if($('#x').attr('is_have') == 'f'){
            can_view = false;
        }
        $(".y").each(function(){
            if($(this).attr('is_have') == 'f'){
                can_view = false;
            }
        });
        if(can_view){
            $(".y").each(function(){
                if($(this).text() != '值'){
                    ys += $(this).attr('class')+" ";
                }
            });
            // 尝试绘图获取x/值数据
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/get_x_y",
                //数据，json字符串
                data :  JSON.stringify({
                    'x': $('#x').attr('class'),
                    'ys': ys,
                    'title': $("#chart_title").val(),
                    'subtitle': $("#chart_subtitle").val(),
                    'chart_type': chart_type,
                    'x_label': $('#x_label').val(),
                    'y_label': $('#y_label').val(),
                    'max': $("#max").is(":checked"),
                    'min': $("#min").is(":checked"),
                    'avg': $("#avg").is(":checked"),
                    'is_stack': is_stack,
                    'data_index_list': data_index_list
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        chart.clear();
                        if($("#legend").is(":checked")){
                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,

                                },
                                xAxis: {
                                    name: result.x_label,
                                    type: 'category',
                                    data: result.x_data
                                },
                                yAxis: {
                                    type: 'value',
                                    name: result.y_label,
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                legend: {
                                },
                                dataZoom: [{}],
                                series:JSON.parse(result.series)
                            }
                        }else{
                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,

                                },
                                xAxis: {
                                    name: result.x_label,
                                    type: 'category',
                                    data: result.x_data
                                },
                                yAxis: {
                                    type: 'value',
                                    name: result.y_label,
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                dataZoom: [{}],
                                series:JSON.parse(result.series)

                            }
                        }
                        chart.setOption(option);

                        is_save = true;
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
        }
    }
    //点击预览 散点图
    function scatter_chart(){
        option = {}
        chart_type = "scatter";
        if( $('#x').text() != '名称' && $('#y').text() != '值'){
            // 尝试绘图获取x/值数据
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/get_x_y",
                //数据，json字符串
                data :  JSON.stringify({
                    'x': $('#x').attr('class'),
                    'y': $('#y').attr('class'),
                    'title': $("#chart_title").val(),
                    'subtitle': $("#chart_subtitle").val(),
                    'chart_type': chart_type,
                    'x_label': $('#x_label').val(),
                    'y_label': $('#y_label').val(),
                    'max': $("#max").is(":checked"),
                    'min': $("#min").is(":checked"),
                    'avg': $("#avg").is(":checked"),
                    'data_index_list': data_index_list,
                    'curr_option': curr_option
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                    chart.clear();
                    switch(result.curr_option){
                        case 'clustering':
                            echarts.registerTransform(ecStat.transform.clustering);
                            var data = result.scatter_data;

                            var CLUSTER_COUNT = 6;
                            var DIENSIION_CLUSTER_INDEX = 2;
                            var COLOR_ALL = [
                                '#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
                            ];
                            var pieces = [];
                            for (var i = 0; i < CLUSTER_COUNT; i++) {
                                pieces.push({
                                    value: i,
                                    label: 'cluster ' + i,
                                    color: COLOR_ALL[i]
                                });
                            }

                            option = {
                                dataset: [{
                                    source: data
                                }, {
                                    transform: {
                                        type: 'ecStat:clustering',
                                        // print: true,
                                        config: {
                                            clusterCount: CLUSTER_COUNT,
                                            outputType: 'single',
                                            outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
                                        }
                                    }
                                }],
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,
                                    left: 'center'
                                },
                                tooltip: {
                                    position: 'top'
                                },
                                visualMap: {
                                    type: 'piecewise',
                                    top: 'middle',
                                    min: 0,
                                    max: CLUSTER_COUNT,
                                    left: 10,
                                    splitNumber: CLUSTER_COUNT,
                                    dimension: DIENSIION_CLUSTER_INDEX,
                                    pieces: pieces
                                },
                                grid: {
                                    left: 120
                                },
                                xAxis: {
                                    name: result.x_label
                                },
                                yAxis: {
                                    name: result.y_label
                                },
                                series: [{
                                    type: 'scatter',
                                    encode: { tooltip: [0, 1] },
                                    symbolSize: 15,
                                    itemStyle: {
                                        borderColor: '#555'
                                    },
                                    datasetIndex: 1
                                }]
                            };
                            break;
                        case 'line_regression':
                            echarts.registerTransform(ecStat.transform.regression);
                            var data = result.scatter_data;
                            option = {
                                dataset: [{
                                    source: data
                                }, {
                                    transform: {
                                        type: 'ecStat:regression'
                                        // 'linear' by default.
                                        // config: { method: 'linear', formulaOn: 'end'}
                                    }
                                }],
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,
                                    left: 'center'
                                },
                                legend: {
                                    bottom: 5
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'cross'
                                    }
                                },
                                xAxis: {
                                    name: result.x_label,
                                    splitLine: {
                                        lineStyle: {
                                            type: 'dashed'
                                        }
                                    },
                                },
                                yAxis: {
                                    name: result.y_label,
                                    splitLine: {
                                        lineStyle: {
                                            type: 'dashed'
                                        }
                                    },
                                },
                                series: [{
                                    name: 'scatter',
                                    type: 'scatter'
                                }, {
                                    name: 'line',
                                    type: 'line',
                                    datasetIndex: 1,
                                    symbolSize: 0.1,
                                    symbol: 'circle',
                                    label: { show: true, fontSize: 16 },
                                    labelLayout: { dx: -20 },
                                    encode: { label: 2, tooltip: 1 },
                                }]
                            };
                            break;
                        case 'exponential_regression':
                            echarts.registerTransform(ecStat.transform.regression);
                            option = {
                                dataset: [{
                                    source: result.scatter_data
                                }, {
                                    transform: {
                                        type: 'ecStat:regression',
                                        config: {
                                            method: 'exponential',
                                            // 'end' by default
                                            // formulaOn: 'start'
                                        }
                                    }
                                }],
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'cross'
                                    }
                                },
                                xAxis: {
                                    name: result.x_label,
                                    splitLine: {
                                        lineStyle: {
                                            type: 'dashed'
                                        }
                                    }
                                },
                                yAxis: {
                                    name: result.y_label,
                                    splitLine: {
                                        lineStyle: {
                                            type: 'dashed'
                                        }
                                    }
                                },
                                series: [{
                                    name: 'scatter',
                                    type: 'scatter',
                                    datasetIndex: 0
                                },{
                                    name: 'line',
                                    type: 'line',
                                    smooth: true,
                                    datasetIndex: 1,
                                    symbolSize: 0.1,
                                    symbol: 'circle',
                                    label: { show: true, fontSize: 16 },
                                    labelLayout: { dx: -20 },
                                    encode: { label: 2, tooltip: 1 },
                                }]
                            };
                            break;
                        case 'polynomial_regression':
                            echarts.registerTransform(ecStat.transform.regression);
                            var data = result.scatter_data;
                            option = {
                                dataset: [{
                                    source: data
                                }, {
                                    transform: {
                                        type: 'ecStat:regression',
                                        config: { method: 'polynomial', order: 3 }
                                    }
                                }],
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,
                                    left: 'center',
                                    top: 16
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'cross'
                                    }
                                },
                                xAxis: {
                                    name: result.x_label,
                                    splitLine: {
                                        lineStyle: {
                                            type: 'dashed'
                                        }
                                    },
                                    splitNumber: 20
                                },
                                yAxis: {
                                    name: result.y_label,
                                    min: -40,
                                    splitLine: {
                                        lineStyle: {
                                            type: 'dashed'
                                        }
                                    }
                                },
                                series: [{
                                    name: 'scatter',
                                    type: 'scatter'
                                    }, {
                                    name: 'line',
                                    type: 'line',
                                    smooth: true,
                                    datasetIndex: 1,
                                    symbolSize: 0.1,
                                    symbol: 'circle',
                                    label: { show: true, fontSize: 16 },
                                    labelLayout: { dx: -20 },
                                    encode: { label: 2, tooltip: 1 },
                                }]
                            };
                            break;
                        default:
                            option = {
                                title: {
                                    text: result.title,
                                    subtext: result.subtitle,
                                    left: 'center'
                                },
                                xAxis: {name:result.x_label},
                                yAxis: {name:result.y_label},
                                series: [{
                                    symbolSize: 20,
                                    data: result.scatter_data,
                                    type: 'scatter',
                                }]
                            };
                    }
                    chart.setOption(option);

                    is_save = true;
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
        }
    }
    // 点击保存视图
    $('#save_bt').click(function save(){
        if(is_save &&  save_chart_index < 10){
            var temp =  $("#right_bottom_left").html();
            save_charts[save_chart_index].setOption(option);
            save_option.push(option);
            is_save = false;
            $('.save_chart').bind('click', view_save);
            save_chart_index ++;
            $('#save_bt').css('background', '#d2d2d2');
            $('#save_bt').attr('class', 'save_bt layui-btn-disabled');
        }
    });
    // 点击保存视图查看
    function view_save(){
        if(save_option[$(this).attr('Id').substr(10,)] != null){
            chart.clear();
            option = save_option[$(this).attr('Id').substr(10,)];
            chart.setOption(option);
        }
    }
    $("#right_bottom_right").click(function(){
         $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/save_chart",
                //数据，json字符串
                data :  JSON.stringify({
                    'save_option': save_option,
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        window.open('/dashboard', "_blank");
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
    })

    $(function () {
        var url = window.location.href;
        $("#re_bt").click(function() {
            // 将选中的数据进行重新渲染
            for(var i = 0; i < data_index_list.length; i++){
                $("#c_"+data_index_list[i]).attr('class', 'c_data');

            }
            data_index_list = [];
        });
    });
    $(document).ready(function(){
        $(".col").first().click();
        $("#bar").click();
    })
    $("#left_center_right").scroll(function(event){
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $("#col_data").height();
        if(scrollTop >= scrollHeight - $(window).height() && is_get){
        　　// 请求多一百条数据
            data_index += 20;
            // 发送请求过去该字段的数据
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/get_col_data/"+data_index,
                //数据，json字符串
                data :  JSON.stringify({
                    'file_index': curr_file,
                    'col': curr_col
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        var temp = '';
                        for(var i = 0; i < result.data.length; i++){
                            temp += '<li style="background: linear-gradient(#b6dbff, #f7f1b6)">'+result.data[i]+'</li>'
                        }
                        $('#col_data').append(temp);
                    }else{
                        is_get = false;
                    }
                    $(this).css('color', 'red');
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
        }


    });

</script>
</html>